<template>
	<view>
		<view class="queryNav">
			<u-navbar>
				<view class="center">
					<view class="centerLeft">
						<view class="leftContent">
							<view class="Leftlive">
								<text>住</text>
								<text style="color: #3587F7;">02-25</text>
							</view>
							<view class="Leftlive">
								<text>离</text>
								<text style="color: #3587F7;">02-25</text>
							</view>
						</view>
						<view class="leftContent">
							<view class="Leftlive">
								<text>成人</text>
								<text style="color: #3587F7;">2</text>
							</view>
							<view class="Leftlive">
								<text>儿童</text>
								<text style="color: #3587F7;">0</text>
							</view>
						</view>
					</view>
					<view class="centerRight">
						<u-input type="text" :clearable="true" placeholder="请输入酒店名称" />
					</view>
				</view>
			</u-navbar>
			<view class="">
				<u-dropdown ref="uDropdown">
					<u-dropdown-item title="智能排序">
						<view class="slot-content">
							<view class="u-text-center u-content-color u-m-t-20">
								<view class="slotContent">
									<view class="ContentChose">
										<view class="ContentLefts">
											<text>智能排序</text>
										</view>
										<view class="ChontentRight">
											<u-icon name="checkbox-mark" color="#3587F7"></u-icon>
										</view>
									</view>
									<view class="ContentChose">
										<view class="ContentLeft">
											<text>好评优先</text>
										</view>
										<view class="ChontentRight">
											<!-- <u-icon name="checkbox-mark" color="#3587F7"></u-icon> -->
										</view>
									</view>
									<view class="ContentChose">
										<view class="ContentLeft">
											<text>低价优先</text>
										</view>
										<view class="ChontentRight">
											<!-- <u-icon name="checkbox-mark" color="#3587F7"></u-icon> -->
										</view>
									</view>
									<view class="ContentChose">
										<view class="ContentLeft">
											<text>高价优先</text>
										</view>
										<view class="ChontentRight">
											<!-- <u-icon name="checkbox-mark" color="#3587F7"></u-icon> -->
										</view>
									</view>
									<view class="ContentChose">
										<view class="ContentLeft">
											<text>直线距离 近→远</text>
										</view>
										<view class="ChontentRight">
											<!-- <u-icon name="checkbox-mark" color="#3587F7"></u-icon> -->
										</view>
									</view>
								</view>
							</view>
						</view>
					</u-dropdown-item>
					<u-dropdown-item title="位置距离">
						<view class="slot-content">
							<view class="u-text-center u-content-color">
								<view class="slotPosition">
									<scroll-view :scroll-y="true" class="scrollView">
										<view class="scrollView-left">
											<view :class="chose == 1 ? 'scrollViewLeft' : 'scrollViewLefts'"
												@click="choseIndex(1)">
												<text>距离</text>
											</view>
											<view :class="chose == 2 ? 'scrollViewLeft' : 'scrollViewLefts'"
												@click="choseIndex(2)">
												<text>行政区</text>
											</view>
											<view :class="chose == 3 ? 'scrollViewLeft' : 'scrollViewLefts'"
												@click="choseIndex(3)">
												<text>机场车站</text>
											</view>
											<!-- 占位 -->
											<view style="width: 100%;height: 102rpx;"></view>
										</view>
									</scroll-view>
									<!-- 距离 -->
									<scroll-view :scroll-y="true" class="scrollViewRight" v-if="chose == 1">
										<view class="scrollView-right">
											<view class="rightContent" v-for="(item,index) in 10">
												<text>500米内</text>
											</view>
											<!-- 占位 -->
											<view style="width: 100%;height: 102rpx;"></view>
										</view>
									</scroll-view>
									<!-- 行政区 -->
									<scroll-view :scroll-y="true" class="scrollViewRight" v-if="chose == 2">
										<view class="scrollView-right">
											<view class="rightContent" v-for="(item,index) in 10">
												<text>福田区</text>
											</view>
											<!-- 占位 -->
											<view style="width: 100%;height: 102rpx;"></view>
										</view>
									</scroll-view>
									<!-- 机场车站 -->
									<view class="scrollViewRights" v-if="chose == 3">
										<view class="scrollLeft">
											<view class="scrollLeft_contents">
												<text>机场</text>
											</view>
											<view class="scrollLeft_content">
												<text>火车站</text>
											</view>
											<view class="scrollLeft_content">
												<text>汽车站</text>
											</view>
										</view>
										<scroll-view :scroll-y="true" class="scrollLeft_Right">
											<view class="RightContent">
												<view class="contentList">
													<text>宝安国际机场</text>
												</view>
												<view class="contentLists">
													<text>深圳宝安国际机场-T3航站楼</text>
												</view>
											</view>
										</scroll-view>
									</view>

									<view class="btn">
										<view class="btn-reset">
											重置
										</view>
										<view class="btn-ok">
											完成
										</view>
									</view>
								</view>
							</view>

						</view>
					</u-dropdown-item>
					<u-dropdown-item title="价格/星级">
						<view class="slot-content">
							<view class="u-text-center u-content-color u-m-t-20 u-m-b-20">
								<view class="chooseBox">
									<view class="content">
										<view class="lable">
											价格
										</view>
										<view class="price-ul">
											<view class="price-li">
												¥ 100以下
											</view>
											<view class="price-li">
												¥ 100-200
											</view>
											<view class="price-li">
												¥ 200-300
											</view>
											<view class="price-li">
												¥ 300-400
											</view>
											<view class="price-li">
												¥ 400-500
											</view>
											<view class="price-li">
												¥ 500-700
											</view>
											<view class="price-li">
												¥ 700-900
											</view>
											<view class="price-li">
												¥ 900以上
											</view>
										</view>
										<view class="level">
											<view class="level-left">
												星级/钻级
											</view>
											<view class="level-right">
												国内星级/钻级说明
												<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
											</view>
										</view>
										<view class="level-ul">
											<view class="level-li">
												<text class="type" style="text-align: center;">二星(钻)及以下</text>
												<text class="tip">经济</text>
											</view>
											<view class="level-li">
												<text class="type">三星(钻)</text>
												<text class="tip">舒适</text>
											</view>
											<view class="level-li">
												<text class="type">四星(钻)</text>
												<text class="tip">高档</text>
											</view>
											<view class="level-li">
												<text class="type">五星(钻)</text>
												<text class="tip">豪华</text>
											</view>
											<view class="level-lii">
												<view class="liu">
													<text class="type">金钻酒店</text>
													<text class="tip">六钻超高品质</text>
												</view>

											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="btns">
								<view class="btn-reset">
									重置
								</view>
								<view class="btn-ok">
									完成
								</view>
							</view>
						</view>
					</u-dropdown-item>
					<u-dropdown-item title="筛选">
						<view class="slot-content">
							<view class="u-text-center u-content-color">
								<view class="slotPosition">
									<scroll-view :scroll-y="true" class="scrollView">
										<view class="scrollView-left">
											<view :class="chose == 1 ? 'scrollViewLeft' : 'scrollViewLefts'"
												@click="choseIndex(1)">
												<text>酒店类型</text>
											</view>
											<view :class="chose == 2 ? 'scrollViewLeft' : 'scrollViewLefts'"
												@click="choseIndex(2)">
												<text>品牌</text>
											</view>
											<view :class="chose == 3 ? 'scrollViewLeft' : 'scrollViewLefts'"
												@click="choseIndex(3)">
												<text>设施</text>
											</view>
											<view :class="chose == 4 ? 'scrollViewLeft' : 'scrollViewLefts'"
												@click="choseIndex(4)">
												<text>特色主题</text>
											</view>
											<!-- 占位 -->
											<view style="width: 100%;height: 102rpx;"></view>
										</view>
									</scroll-view>
									<!-- 距离 -->
									<scroll-view :scroll-y="true" class="scrollViewRight">
										<view class="scrollView-right">
											<view class="screen">
												<view class="screenTitle">
													<text>酒店类型</text>
												</view>
												<view class="screenType">
													<view class="screenType-type" v-for="(item,index) in 8">
														<text>酒店公寓</text>
													</view>
												</view>
											</view>
											<view class="screen">
												<view class="screenTitle">
													<text>品牌</text>
												</view>
												<view class="screen_introduce">
													<view class="introduce">
														<view class="introduce-left">
															<text>高端连锁</text>
														</view>
														<view class="introduce-right">
															<text>展开</text>
															<u-icon name="arrow-down" color="#3587F7"></u-icon>
														</view>
													</view>
													<view class="screen_introduce-screenType">
														<view class="screenType-type" v-for="(item,index) in 8">
															<text>酒店公寓</text>
														</view>
													</view>
												</view>
												<view class="screen_introduce">
													<view class="introduce">
														<view class="introduce-left">
															<text>中端连锁</text>
														</view>
														<view class="introduce-right">
															<text>展开</text>
															<u-icon name="arrow-down" color="#3587F7"></u-icon>
														</view>
													</view>
													<view class="screen_introduce-screenType">
														<view class="screenType-type" v-for="(item,index) in 8">
															<text>酒店公寓</text>
														</view>
													</view>
												</view>
											</view>
											<!-- 占位 -->
											<view style="width: 100%;height: 102rpx;"></view>
										</view>
									</scroll-view>

									<view class="btn">
										<view class="btn-reset">
											重置
										</view>
										<view class="btn-ok">
											完成
										</view>
									</view>
								</view>
							</view>
						</view>
					</u-dropdown-item>
				</u-dropdown>
			</view>
		</view>
		<view style="width: 100%;height: 80rpx;"></view>
		<view class="hotel_List">
			<view class="list" @click="navTo()">
				<view class="listImage">
					<image src="/static/imgs/del/del.png" mode=""></image>
				</view>
				<view class="hotelInformation">
					<view class="hotelTitle">
						<text>深圳大中华希尔顿酒店</text>
						<view class="hotelImage" v-for="(item,index) in 5">
							<image src="/static/imgs/zuanshi.png" mode=""></image>
						</view>
					</view>
					<view class="hotelcomment">
						<view class="hotelscore">
							<text>4.9</text>
						</view>
						<view class="commentLv">
							<text>不错</text>
						</view>
						<view class="comment">
							<text>208条点评</text>
						</view>
					</view>
					<view class="inforText">
						<text>据酒店直线960米</text>
					</view>
					<view class="inforText">
						<text>近岗厦地铁站 会展中心</text>
					</view>
					<view class="hotelTips">
						<view class="hotelTips-left">
							<text>低价房型即将售完</text>
						</view>
						<view class="hotelTips-right">
							<image src="/static/imgs/gouxuan.png" mode=""></image>
							<text>免费兑延迟退房</text>
						</view>
					</view>
					<view class="hotelMoney">
						<text>¥ <text style="font-size: 40rpx;">698</text> <text style="color: #666666;">起</text>
						</text>
					</view>
				</view>
			</view>
		</view>

		<view class="nearby">
			<image src="/static/imgs/fulijinIcon.png" mode=""></image>
			<text>附近热卖酒店</text>
		</view>
		<view class="hotel_List" v-for="(item,index) in 5">
			<view class="list">
				<view class="listImage">
					<image src="/static/imgs/del/del.png" mode=""></image>
				</view>
				<view class="hotelInformation">
					<view class="hotelTitle">
						<text>深圳大中华希尔顿酒店</text>
						<view class="hotelImage" v-for="(item,index) in 5">
							<image src="/static/imgs/zuanshi.png" mode=""></image>
						</view>
					</view>
					<view class="hotelcomment">
						<view class="hotelscore">
							<text>4.9</text>
						</view>
						<view class="commentLv">
							<text>不错</text>
						</view>
						<view class="comment">
							<text>208条点评</text>
						</view>
					</view>
					<view class="inforText">
						<text>据酒店直线960米</text>
					</view>
					<view class="inforText">
						<text>近岗厦地铁站 会展中心</text>
					</view>
					<view class="hotelTips">
						<view class="hotelTips-left">
							<text>低价房型即将售完</text>
						</view>
						<view class="hotelTips-right">
							<image src="/static/imgs/gouxuan.png" mode=""></image>
							<text>免费兑延迟退房</text>
						</view>
					</view>
					<view class="hotelMoney">
						<text>¥ <text style="font-size: 40rpx;">698</text> <text style="color: #666666;">起</text>
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chose: 1
			}
		},
		methods: {
			choseIndex: function(index) {
				this.chose = index;
			},
			navTo(){
				uni.navigateTo({
					url:'../hotelDetails/hotelDetails'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F2F2F7;
	}

	/deep/.u-dropdown__menu__item__text {
		font-family: Segoe UI;
		font-weight: bold;
	}

	/deep/.u-dropdown__content__popup {
		background-color: #FFFFFF;
	}

	/deep/.u-text-center {
		text-align: left;
	}

	.inforText {
		color: #333333;
		font-size: 28rpx;
		font-family: Segoe UI;
		font-weight: normal;
		margin-top: 6rpx;
	}

	.queryNav {
		width: 100%;
		background-color: #FFFFFF;

		.center {
			width: 650rpx;
			height: 68rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			border-radius: 80rpx;
			background-color: #F4F4F4;

			.centerLeft {
				display: flex;
				height: 100%;
				align-items: center;
				margin-left: 28rpx;
				// padding: 0rpx 12rpx 0rpx 28rpx;
				border-right: 2rpx solid #FFFFFF;

				.leftContent {
					display: flex;
					margin-right: 12rpx;
					flex-direction: column;

					.Leftlive {
						color: #666666;
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: 400;
					}
				}

			}

			.centerRight {
				width: 380rpx;
				margin-left: 20rpx;

				u-input {
					color: #333333;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: bold;
				}
			}
		}
	}

	.slotContent {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;

		.ContentChose {
			width: 694rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #F2F2F7;

			.ContentLefts {
				color: #3587F7;
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
			}

			.ContentLeft {
				color: #666666;
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
			}
		}
	}

	.slotPosition {
		width: 100%;
		height: 760rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.scrollView {
			width: 192rpx;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			background-color: #F6F5FA;

			.scrollView-left {
				width: 100%;
				display: flex;
				align-items: center;
				flex-direction: column;

				.scrollViewLeft {
					width: 100%;
					height: 80rpx;
					display: flex;
					align-items: center;
					background-color: #FFFFFF;
					border-bottom: 2rpx solid #F2F2F7;

					text {
						color: #3587F7;
						font-size: 32rpx;
						font-family: Segoe UI;
						font-weight: 400;
						margin-left: 28rpx;
					}
				}

				.scrollViewLefts {
					width: 100%;
					height: 80rpx;
					display: flex;
					align-items: center;
					background-color: #F6F5FA;
					border-bottom: 2rpx solid #F2F2F7;

					text {
						color: #666666;
						font-size: 32rpx;
						font-family: Segoe UI;
						font-weight: 400;
						margin-left: 28rpx;
					}
				}
			}
		}

		.scrollViewRight {
			width: 558rpx;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			background-color: #FFFFFF;

			.scrollView-right {
				width: 100%;
				display: flex;
				align-items: flex-end;
				flex-direction: column;

				.rightContent {
					width: 536rpx;
					height: 88rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					border-bottom: 2rpx solid #F2F2F7;

					text {
						color: #333333;
						font-size: 32rpx;
						font-family: Segoe UI;
						font-weight: bold;
					}
				}

				.screen {
					width: 536rpx;
					display: flex;
					padding: 20rpx 0rpx;
					align-items: flex-start;
					flex-direction: column;
					border-bottom: 2rpx solid #F2F2F7;

					.screenTitle {
						color: #333333;
						font-size: 36rpx;
						font-family: Segoe UI;
						font-weight: bold;
						margin-bottom: 8rpx;
					}

					.screen_introduce {
						width: 510rpx;
						display: flex;
						margin-bottom: 40rpx;
						flex-direction: column;
						align-items: flex-start;

						.introduce {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;

							&-left {
								color: #666666;
								font-size: 24rpx;
								font-family: Segoe UI;
								font-weight: 400;
							}

							&-right {
								display: flex;
								align-items: center;

								text {
									color: #3587F7;
									font-size: 24rpx;
									font-family: Segoe UI;
									font-weight: 400;
								}
							}
						}

						&-screenType {
							width: 100%;
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;

							.screenType-type {
								width: 164rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								background-color: #F6F5FA;
								margin-top: 8rpx;
								padding: 16rpx 0rpx 14rpx 0rpx;

								text {
									color: #333333;
									font-size: 24rpx;
									font-family: Segoe UI;
									font-weight: 400;
								}
							}

							&::after {
								content: '';
								width: 164rpx;
							}
						}
					}

					.screenType {
						width: 508rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						&-type {
							width: 164rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #F6F5FA;
							margin-top: 8rpx;
							padding: 16rpx 0rpx 14rpx 0rpx;

							text {
								color: #333333;
								font-size: 24rpx;
								font-family: Segoe UI;
								font-weight: 400;
							}
						}

						&::after {
							content: '';
							width: 164rpx;
						}
					}
				}
			}
		}

		.scrollViewRights {
			width: 558rpx;
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			display: flex;
			align-items: flex-start;
			background-color: #FFFFFF;

			.scrollLeft {
				width: 192rpx;
				display: flex;
				align-items: flex-end;
				flex-direction: column;

				.scrollLeft_contents {
					width: 170rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					border-bottom: 2rpx solid #F2F2F7;

					text {
						color: #3587F7;
						font-size: 32rpx;
						font-family: Segoe UI;
						font-weight: 400;
					}
				}

				.scrollLeft_content {
					width: 170rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					border-bottom: 2rpx solid #F2F2F7;

					text {
						color: #666666;
						font-size: 32rpx;
						font-family: Segoe UI;
						font-weight: 400;
					}
				}
			}

			.scrollLeft_Right {
				width: 366rpx;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				border-left: 2rpx solid #F2F2F7;

				.RightContent {
					width: 100%;
					display: flex;
					align-items: flex-end;
					flex-direction: column;

					.contentList {
						width: 346rpx;
						display: flex;
						align-items: flex-start;
						padding: 22rpx 0rpx 16rpx 0rpx;
						border-bottom: 2rpx solid #F2F2F7;

						text {
							color: #333333;
							font-size: 32rpx;
							font-family: Segoe UI;
							font-weight: bold;
						}
					}

					.contentLists {
						width: 346rpx;
						display: flex;
						align-items: flex-start;
						padding: 22rpx 0rpx 16rpx 0rpx;
						border-bottom: 2rpx solid #F2F2F7;

						text {
							color: #333333;
							font-size: 28rpx;
							font-family: Segoe UI;
							font-weight: 400;
						}
					}
				}
			}
		}

		.btn {
			width: 100%;
			position: absolute;
			bottom: 0;
			border-top: 2rpx solid #F2F2F7;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			padding: 12rpx 0;
			background-color: #FFFFFF;

			.btn-reset {
				width: 340rpx;
				height: 76rpx;
				background: #FFFFFF;
				border: 2rpx solid rgba(153, 153, 153, 0.4980392156862745);
				border-radius: 8rpx;
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: 400;
				line-height: 76rpx;
				color: #333333;
				text-align: center;
			}

			.btn-ok {
				width: 340rpx;
				height: 76rpx;
				background: #3587F7;
				border-radius: 8rpx;
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: 400;
				line-height: 76rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}

	.chooseBox {
		.title {
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 34rpx;
			font-family: Segoe UI;
			font-weight: bold;
			color: #333333;
		}

		.content {
			padding: 0 28rpx;

			.lable {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
			}

			.price-ul {
				margin-top: 32rpx;
				display: flex;
				flex-wrap: wrap;

				.price-li {
					margin-right: 7rpx;
					margin-bottom: 8rpx;
					width: 168rpx;
					height: 68rpx;
					background: #F6F5FA;
					border-radius: 4px;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;
					text-align: center;
					line-height: 68rpx;

					&:nth-child(4n) {
						margin-right: 0rpx;
					}
				}
			}

			.level {
				margin-top: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.level-left {
					font-size: 32rpx;
					font-family: Segoe UI;
					font-weight: bold;
					color: #333333;
				}

				.level-right {
					font-size: 24rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #3587F7;
				}
			}

			.level-ul {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;

				.level-li {
					width: 168rpx;
					height: 108rpx;
					background: #F6F5FA;
					border-radius: 4rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 0 10rpx;
					margin-bottom: 14rpx;
					margin-right: 7rpx;

					&:nth-child(4n) {
						margin-right: 0
					}

					image {
						width: 32rpx;
						height: 32rpx;
					}

					.type {
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #333333;
					}

					.tip {
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #666666;
					}
				}

				.level-lii {
					width: 344rpx;
					height: 108rpx;
					background: #F6F5FA;
					border-radius: 4rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 32rpx;
						height: 32rpx;
					}

					.liu {
						margin-left: 12rpx;
						display: flex;
						flex-direction: column;

						.type {
							font-size: 28rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #333333;
						}

						.tip {
							font-size: 24rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}
		}
	}

	.btns {
		border-top: 2rpx solid #F2F2F7;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		margin-top: 64rpx;
		padding: 12rpx 0;

		.btn-reset {
			width: 340rpx;
			height: 76rpx;
			background: #FFFFFF;
			border: 2rpx solid rgba(153, 153, 153, 0.4980392156862745);
			border-radius: 8rpx;
			font-size: 32rpx;
			font-family: Segoe UI;
			font-weight: 400;
			line-height: 76rpx;
			color: #333333;
			text-align: center;
		}

		.btn-ok {
			width: 340rpx;
			height: 76rpx;
			background: #3587F7;
			border-radius: 8rpx;
			font-size: 32rpx;
			font-family: Segoe UI;
			font-weight: 400;
			line-height: 76rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.Leftlive text:nth-child(2)::before {
		content: '';
		margin-right: 10rpx;
	}

	.hotel_List {
		width: 100%;
		display: flex;
		padding-top: 30rpx;
		align-items: center;
		flex-direction: column;
		background-color: #FFFFFF;

		.list {
			width: 696rpx;
			display: flex;
			margin-bottom: 24rpx;
			align-items: flex-start;

			.listImage {
				width: 212rpx;
				height: 320rpx;
				overflow: hidden;
				border-radius: 8rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.hotelInformation {
				width: 472rpx;
				margin-left: 12rpx;

				.hotelTitle {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					align-items: center;

					text {
						color: #333333;
						font-size: 36rpx;
						font-family: Segoe UI;
						font-weight: bold;
						margin-right: 12rpx;
					}

					.hotelImage {
						width: 18rpx;
						height: 18rpx;
						display: flex;
						margin-right: 8rpx;
						align-items: center;
						justify-content: center;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.hotelcomment {
					display: flex;
					margin-top: 12rpx;
					align-items: flex-start;

					.hotelscore {
						width: 60rpx;
						height: 42rpx;
						display: flex;
						margin-right: 12rpx;
						align-items: center;
						justify-content: center;
						background-image: url(../../../../static/imgs/pingfen.png);
						background-size: 100% 100%;

						text {
							color: #FFFFFF;
							font-size: 28rpx;
							font-family: Segoe UI;
							font-weight: 400;
							margin-bottom: 8rpx;
						}
					}

					.commentLv {
						color: #3587F7;
						margin-right: 6rpx;
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: bold;
					}

					.comment {
						color: #333333;
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
					}
				}

				.hotelTips {
					width: 100%;
					display: flex;
					margin-top: 6rpx;
					align-items: center;
					justify-content: space-between;

					&-left {
						color: #B70303;
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: normal;
					}

					&-right {
						display: flex;
						align-items: center;

						image {
							width: 24rpx;
							height: 24rpx;
						}

						text {
							color: #333333;
							font-size: 24rpx;
							font-family: Segoe UI;
							font-weight: normal;
						}
					}
				}

				.hotelMoney {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					text {
						color: #FF4600;
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: 400;
					}
				}
			}
		}
	}

	.nearby {
		width: 100%;
		display: flex;
		height: 100rpx;
		margin-top: 34rpx;
		align-items: center;
		background-color: #FFFFFF;

		image {
			width: 36rpx;
			height: 36rpx;
			margin: 0rpx 8rpx 0rpx 28rpx;
		}

		text {
			color: #333333;
			font-size: 32rpx;
			font-family: Segoe UI;
			font-weight: bold;
		}
	}
</style>
